<template>
  <div class="home">
    <Header></Header>
      <!-- @*2020解决方案大会*@-->
      <div id="meeting" class="tonglan">
              <div class="big_img banxin">
                  <div class="show_img"></div>
                  <div class="introduce">
                      <div class="about">
                              <div class="about_title">
                                <p><span>关于平台</span></p>
                                <div class="xian"></div>
                              </div>

                              <div class="about_word">
                                <p ><span>&nbsp;&nbsp;&nbsp; 在全球正迈向数字化新时代的今天，制造业数字化转型已成为各国重要战略之一。新一代信息技术的应用已经推进成为企业数字化转型的重要动力，德国依托雄厚的自动化基础，推进工业4.0，美国在实施先进制造战略的同时，大力发展工业互联网。我国深入推进“互联网+”行动，推动数字技术创新应用，推进数字经济与实体经济融合发展，促进传统产业数字化转型。</span></p>
                              </div>
                              <p class="details"><span>查看详情</span></p>

                       </div>
                  </div>
              </div>

          <table class="banxin table2">
              <tr>
                  <td>
                      <p>技术在线</p>
                      <span>技术改造的热点案例</span>
                      <ul>
                          <li><img class="dian_img" src="../assets/image/header/u34.svg" />支撑疫情防控和复工复产工业互联网...<a class="time">2020.08.10</a></li>
                          <li><img class="dian_img" src="../assets/image/header/u34.svg" />支撑疫情防控和复工复产工业互联网...<a class="time">2020.08.10</a></li>
                          <li><img class="dian_img" src="../assets/image/header/u34.svg" />支撑疫情防控和复工复产工业互联网...<a class="time">2020.08.10</a></li>
                          <li><img class="dian_img" src="../assets/image/header/u34.svg" />支撑疫情防控和复工复产工业互联网...<a class="time">2020.08.10</a></li>
                          <li><img class="dian_img" src="../assets/image/header/u34.svg" />支撑疫情防控和复工复产工业互联网...<a class="time">2020.08.10</a></li>
                          <li><a class="more">MORE&gt;&gt;</a></li>
                      </ul>
                  </td>
                  <td>
                      <p>平台动态</p>
                      <span>单位为了企业数字化转型举办或参与举办的活动的介绍</span>
                      <ul>
                          <li><img class="dian_img" src="../assets/image/header/u34.svg" />支撑疫情防控和复工复产工业互联网...<a class="time">2020.08.10</a></li>
                          <li><img class="dian_img" src="../assets/image/header/u34.svg" />支撑疫情防控和复工复产工业互联网...<a class="time">2020.08.10</a></li>
                          <li><img class="dian_img" src="../assets/image/header/u34.svg" />支撑疫情防控和复工复产工业互联网...<a class="time">2020.08.10</a></li>
                          <li><img class="dian_img" src="../assets/image/header/u34.svg" />支撑疫情防控和复工复产工业互联网...<a class="time">2020.08.10</a></li>
                          <li><img class="dian_img" src="../assets/image/header/u34.svg" />支撑疫情防控和复工复产工业互联网...<a class="time">2020.08.10</a></li>
                          <li><a class="more">MORE&gt;&gt;</a></li>
                      </ul>
                  </td>
                  <td>
                      <p>推广活动</p>
                      <span>企业数字化转型举办或参与举办的活动</span>
                      <ul>
                          <li><img class="dian_img" src="../assets/image/header/u34.svg" />支撑疫情防控和复工复产工业互联网...<a class="time">2020.08.10</a></li>
                          <li><img class="dian_img" src="../assets/image/header/u34.svg" />支撑疫情防控和复工复产工业互联网...<a class="time">2020.08.10</a></li>
                          <li><img class="dian_img" src="../assets/image/header/u34.svg" />支撑疫情防控和复工复产工业互联网...<a class="time">2020.08.10</a></li>
                          <li><img class="dian_img" src="../assets/image/header/u34.svg" />支撑疫情防控和复工复产工业互联网...<a class="time">2020.08.10</a></li>
                          <li><img class="dian_img" src="../assets/image/header/u34.svg" />支撑疫情防控和复工复产工业互联网...<a class="time">2020.08.10</a></li>
                          <li><a class="more">MORE&gt;&gt;</a></li>
                      </ul>
                  </td>
              </tr>
          </table>
          <!--   @*优秀方案展示*@ 两行六列-->
          <div id="show" class="banxin">
              <div class="title">
                  <p>数字化转型优秀方案</p>
                  <span>行业数字化转型优秀方案展示</span>
              </div>
              <div class="show_list">
                  <div class="show_img1"> <span class="img_title">服装行业优秀方案</span></div>
                  <div class="show_img2"><span class="img_title">家电行业优秀方案</span> </div>
                  <div class="show_img3"> <span class="img_title">高端设备优秀方案</span></div>
                  <div class="show_img4"><span class="img_title">农机行业优秀方案</span></div>
                  <div class="show_img5"><span class="img_title">化学制药优秀方案</span></div>
                  <div class="show_img6"> <span class="img_title">其他行业优秀方案</span></div>
              </div>
          </div>

      </div>
      <!-- @*优秀方案展示*@-->
      <div id="public" class="tonglan">
          <div class="title">
              <p>公共服务</p>
              <span class="span_title">提供面向制造企业数字化转型的公共服务</span>
          </div>
          <table class="banxin">
              <tr>
                  <td>
                      <div class="public_div">
                          <img class="public_img1" src="../assets/image/header/u86.png" />
                          <span class="span1">数字化转型咨询</span>
                      </div>
                  </td>
                  <td>
                      <div class="public_div">
                          <img class="public_img1" src="../assets/image/header/u88.png" />
                          <span>企业数字化转型自诊断</span>
                      </div>
                  </td>
                  <td>
                      <div class="public_div">
                          <img class="public_img1" src="../assets/image/header/u90.png" />
                          <span>企业需求和服务商对接</span>
                      </div>
                  </td>
                  <td>
                      <div class="public_div">
                          <img class="public_img1" src="../assets/image/header/u92.png" />
                          <span class="span4">技术服务交易</span>
                      </div>
                  </td>
              </tr>
          </table>
      </div>
      <Footer></Footer>
  </div>
</template>

<script>
    import Header from "@/components/content/header/Header";
    import Footer from "@/components/content/footer/Footer";
export default {
  name: 'Home',
  components: {
      Header,
      Footer,
  }
}
</script>
<style>
    /*2020解决方案大会*/
    .big_img{
        height: 558px;
        display: flex;
    }
    .show_img{
        height: 558px;
        width: 68%;
        background: url("~@/assets/image/header/u5.png");
        background-size: 100% 558px;
        background-repeat: no-repeat;
    }
    .introduce{
        width: 33%;
        height: 558px;
        background-color: rgba(2, 125, 180, 1);
    }
    /*关于平台*/
    .about{
        width: 80%;
        height: 50%;
        color: #FFFFFF;
        margin: 10%;
    }
    .about_title {
        font-size: 30px;
        font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
        font-weight: 700;
        font-style: normal;
    }
    .xian {
        width:200px;
        height:2px;
        margin-top:20px;
        border-bottom: 1px solid white;
    }

    .about_word p {
        font-size: 18px;
        margin-top: 50px;
        margin-bottom: 30px;
        font-family: '微软雅黑', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
        letter-spacing: 3px;
        color: #FFFFFF;
        line-height: 29px;
    }
    .about_word {

    }
    .details{
        font-family: '微软雅黑', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 22px;
        text-align: right;
    }
    .details span{
        border: 1px solid white;
        padding: 3px;
    }
    /*技术在线等*/
    .table2 p {
        margin: 20px;
        margin-top: 30px;
        font-style: normal;
        font-size: 25px;
        color: #176DAA;
        font-family: 'Arial Normal', 'Arial', sans-serif;
        font-style: normal;
        text-align: left;
    }
    .table2 span {
        border-width: 0px;
        display: flex;
        font-size: 16px;
        color: #D7D7D7;
        margin: 20px;
    }
    .table2 ul li {
        border-width: 0px;
        display: flex;
        font-family: '微软雅黑', sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 18px;
        margin-top:45px;
        margin-bottom:40px;
    }
    .table2 .time {
        color: #8A8A8A;
        display: flex;
        font-size: 18px;
        margin-left:50px;
    }
    .dian_img {
        border-width: 0px;
        width: 11px;
        height: 11px;
        margin-top:8px;
        margin-right:12px;
    }
    .more {
        display: flex;
        font-size: 18px;
        color: #176DAA;
        margin-left:385px;
    }

    /*优秀方案展示*/
    #show {
        height: 549px;
        background: url("~@/assets/image/header/u65.png");
    }
    #show .title {
        text-align: center;
        padding-left: 45%;
    }
    #show p {
        border-width: 0px;
        display: flex;
        font-family: '微软雅黑 Light', '微软雅黑 Regular', '微软雅黑', sans-serif;
        font-weight: 250;
        font-style: normal;
        font-size: 25px;
        color: #FFFFFF;
        padding-top: 40px;
        padding-bottom: 20px;
        text-align: center;
    }
    #show span {
        text-align: center;
        display: flex;
        font-family: '微软雅黑 Light', '微软雅黑 Regular', '微软雅黑', sans-serif;
        font-weight: 250;
        font-style: normal;
        font-size: 16px;
        color: #D7D7D7;
    }
    .show_list{
        height:65%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    #show .show_img1 {
        margin-top: 4px;
        width: 272px;
        height: 183px;
        background: inherit;
        background-color: rgba(242, 242, 242, 1);
        background: url("~@/assets/image/header/u67_div.png");
        background-repeat: no-repeat;
        background-size: 272px 181px;
        background-position: 0.0px 1.0px;
        border: none;
        border-radius: 0px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    #show .img_title {
        font-size: 21px;
        color: #FFFFFF;
        margin-left: 25%;
        padding-top: 25%;
    }
    #show .show_img2 {
        margin: 4px;
        width: 272px;
        height: 183px;
        background: inherit;
        background-color: rgba(242, 242, 242, 1);
        background: url("~@/assets/image/header/u68_div.png");
        background-repeat: no-repeat;
        background-size: 272px 181px;
        background-position: 0.0px 1.0px;
        border: none;
        border-radius: 0px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    #show .show_img3 {
        margin: 4px;
        width: 272px;
        height: 183px;
        background: inherit;
        background-color: rgba(242, 242, 242, 1);
        background: url("~@/assets/image/header/u69_div.png");
        background-repeat: no-repeat;
        background-size: 272px 181px;
        background-position: 0.0px 1.0px;
        border: none;
        border-radius: 0px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    #show .show_img4 {
        margin: 4px;
        width: 272px;
        height: 183px;
        background: inherit;
        background-color: rgba(242, 242, 242, 1);
        background: url("~@/assets/image/header/u70_div.png");
        background-repeat: no-repeat;
        background-size: 272px 181px;
        background-position: 0.0px 1.0px;
        border: none;
        border-radius: 0px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    #show .show_img5 {
        margin: 4px;
        border-width: 0px;
        width: 272px;
        height: 183px;
        background: inherit;
        background-color: rgba(242, 242, 242, 1);
        background: url("~@/assets/image/header/u71_div.png");
        background-repeat: no-repeat;
        background-size: 272px 181px;
        background-position: 0.0px 1.0px;
        border: none;
        border-radius: 0px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    #show .show_img6 {
        margin: 4px;
        border-width: 0px;
        width: 272px;
        height: 183px;
        background: inherit;
        background-color: rgba(242, 242, 242, 1);
        background: url("~@/assets/image/header/u72_div.png");
        background-repeat: no-repeat;
        background-size: 272px 181px;
        background-position: 0.0px 1.0px;
        border: none;
        border-radius: 0px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    /*公共服务*/
    #public {
        height: 750px;
        background: url("~@/assets/image/header/u22222.png");
        background-size: 100% 1639px;
    }
    #public .title {
        text-align: center;
    }

    #public p {
        border-width: 0px;
        display: flex;
        font-family: '微软雅黑 Light', '微软雅黑 Regular', '微软雅黑', sans-serif;
        font-weight: 250;
        font-style: normal;
        font-size: 25px;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 50%;
    }

    #public .span_title {
        text-align: center;
        display: flex;
        font-family: '微软雅黑 Light', '微软雅黑 Regular', '微软雅黑', sans-serif;
        font-weight: 250;
        font-style: normal;
        font-size: 16px;
        color: #7F7F7F;
        padding-left: 45%;
    }
    #public .public_div {
        border-width: 0px;
        width: 318px;
        height: 318px;
        background: inherit;
        background-color: rgba(2, 125, 180, 1);
        border: none;
        border-radius: 0px;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
        margin: 50px;
    }

    .public_img1 {
        border-width: 0px;
        width: 144px;
        height: 144px;
        display: flex;
        margin:0 auto;
        padding-top:25%;
    }
    .public_div span {
        border-width: 0px;
        width: 200px;
        height: 30px;
        display: flex;
        font-size: 20px;
        color: #FFFFFF;
        margin: 0 auto;
        padding-top: 20px;
        padding-left:20px;
    }
    .router-link-active {
        color: white;
    }
</style>
